<template>
	<view>
		<view class="header">
			<p  style="text-align: center;font-size: 40rpx;margin-top: 60rpx;font-weight: 400;color: #FFFFFF;" >菜谱搜索</p>
		</view>
		<view class="" style="height: 200rpx;">
		</view>
		<view class="Search">
			<view style="width: 70%;margin: 0 auto;background-color: #FFFFFF;height: 60rpx;border-radius:20rpx;display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
				<image src="../../static/image/home/caipusousuo_slices/mengbanzu%202.png"
				 style="width: 30rpx;height: 26rpx;" mode=""></image>
				 <input type="text" value="" placeholder="甜点" style="margin-left: 10rpx;" />
				 <text style="position: absolute;right: 20rpx;color:#FFFFFF;">搜索</text>
			</view>
		</view>
		<view class="item">
			<p class="p1" style="font-size: 26rpx;" >金品名厨视频-会员专享 <image src="../../static/image/home/caipusousuo_slices/mengbanzu282.png" mode=""></image></p>
		<scroll-view scroll-x=trun style="width:auto;overflow: hidden;white-space: nowrap;">
			
			<view class="srollitem">
				<image src="../../static/image/home/caipusousuo_slices/NoPath%20(131).png" mode=""></image>
				<view class="textitem">
					<p style="font-size:24rpx;color: #999999;">芋泥软软冰|夏日解暑必备</p>
					<p class="p" style="font-weight: 100;font-size: 26rpx;" >180.0万 <image style="width: 26rpx ;height: 18rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					 3.5万<image style="width: 36rpx ;height: 36rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu279.png" mode=""></image>
					 </p>
				</view>
			</view>
			<view class="srollitem">
				<image src="../../static/image/home/caipusousuo_slices/NoPath%20(131).png" mode=""></image>
				<view class="textitem">
					<p style="font-size:24rpx;color: #999999;">芋泥软软冰|夏日解暑必备</p>
					<p class="p" style="font-weight: 100;font-size: 26rpx;" >180.0万 <image style="width: 26rpx ;height: 36rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					 3.5万<image style="width: 36rpx ;height: 36rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu279.png" mode=""></image>
					 </p>
				</view>
			</view>
			<view class="srollitem">
				<image src="../../static/image/home/caipusousuo_slices/NoPath%20(131).png" mode=""></image>
				<view class="textitem">
					<p style="font-size:24rpx;color: #999999;">芋泥软软冰|夏日解暑必备</p>
					<p class="p" style="font-weight: 100;font-size: 26rpx;" >180.0万 <image style="width: 26rpx ;height: 36rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					 3.5万<image style="width: 36rpx ;height:36rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu279.png" mode=""></image>
					 </p>
				</view>
			</view>
			<view class="srollitem">
				<image src="../../static/image/home/caipusousuo_slices/NoPath%20(131).png" mode=""></image>
				<view class="textitem">
					<p style="font-size:24rpx;color: #999999;">芋泥软软冰|夏日解暑必备</p>
					<p class="p" style="font-weight: 100;font-size: 26rpx;" >180.0万 <image style="width: 26rpx ;height: 18rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					 3.5万<image style="width: 36rpx ;height: 36rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu279.png" mode=""></image>
					 </p>
				</view>
			</view>
			
		</scroll-view>
		</view>
		<view class="dibu" style="padding: 20rpx;margin-bottom: 20rpx;">
			<view class="dibuitem">
				<image src="../../static/image/home/caipusousuo_slices/NoPath%20%20(133).png" mode=""></image>
				<view class="divutext" style="position: relative;">
					<p style="font-size:26rpx;">蜜豆鯈鱼烧</p>
					<p style="font-size:20rpx;color: #999999;">鸡蛋，低筋面粉，玉米淀粉</p>	
					<p style="font-size: 20rpx;position: absolute;bottom: 20rpx;color: #999999;">2.8万 
					<image style="margin-right: 50rpx;" src="../../static/image/home/caipusousuo_slices/mengbanzu278(1).png" mode=""></image>
					2.8万
					<image style="" src="../../static/image/home/caipusousuo_slices/mengbanzu279(1).png" mode=""></image>
					</p>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.header{
		height: 200rpx;
		width: 100%;
		overflow: hidden;
		background: url(../../static/image/home/caipusousuo_slices/ditu%20.png) ;
		background-size: cover;
		position: fixed;
		top: 0;
	}
	.Search{
		border-top: 2rpx solid #FFFFFF;
		height: 100rpx;
		background: url(../../static/image/home/caipusousuo_slices/ditu%20.png) ;
		background-size: cover;
	}
	.item{
		padding:0rpx 20rpx;
	}
	.item .p1 image{
		position: relative;
		top: 4rpx;
		width: 30rpx ;height: 30rpx;
	}
	.item p{
		padding: 10rpx 0rpx;
		display: flex;
	}
	.srollitem{
		width: 300rpx;
		height: 250rpx;
		margin-right: 10rpx;
		display: inline-block;
	}
	.srollitem image{
		width: 100%;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.p image:first-child{
		margin-right: 40rpx; 
	}
	.textitem{
		margin-top: -20rpx;
		padding:20rpx;
		background-color: #F1F1F1
	}
	.dibuitem{
		display: flex;
	}
	.dibuitem image{
		width: 300rpx;
		height: 200rpx;
		display: block;
	}
	.divutext{
		padding: 10rpx;
	}
	.divutext image{
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
		position: relative;
		top: 4rpx;
	}
</style>
